<template>
  <div class="main">
    <ElConfigProvider :locale="config.locale">
      <ElCascader style="width: 100%;" v-model="model" :options="data" :multiple="multiple" clearable
        :filterable="filterable" :disabled="disabled" :collapseTags="collapseTags" :name="name"
        :placeholder="placeholder" :valueKey="valueKey" :props="finalProps" collapse-tags-tooltip
        @change="handleChange" />
    </ElConfigProvider>
    <Http v-model="data" v-model:loading="loading" ref="httpRef" :url="url" :method="method" :params="finalParams"
      :auto="auto" :concurrent="concurrent">
    </Http>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { ElCascader } from 'element-plus';
import config from '../../config';
import Http from '@/components/Http';
import 'element-plus/dist/index.css'

const props = defineProps({
  url: {
    type: String,
    default: ''
  },
  method: {
    type: String,
    default: 'get'
  },
  params: {
    type: Object,
    default: () => { return {} }
  },
  //是否当参数变化时自动发送请求
  auto: {
    type: Boolean,
    default: false
  },
  //为true时允许出现并发请求
  concurrent: {
    type: Boolean,
    default: true
  },
  multiple: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: false
  },
  collapseTags: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  name: {
    type: String,
    default: ''
  },
  valueKey: {
    type: String,
    default: 'id'
  },
  prop: {
    type: Object,
    default: () => { return { label: 'name', value: 'id', disabled: 'disabled' } }
  },
});
const emit = defineEmits(["onChange"]);
const model = defineModel()
const data = defineModel('data', {
  type: Array,
  default: () => []
});
const loading = ref(false);
const httpRef = ref();
const finalProps = computed(() => {
  return {
    multiple: props.multiple,
    ...props.prop,
  }
})
const finalParams = computed(() => {
  return {
    ...props.params,
  }
})

function send() {
  httpRef.value.send();
}

function handleChange(values) {
  emit('onChange', values);
}

defineExpose({
  send
})

</script>
<style scoped></style>